<ui:composition template="/WEB-INF/templates/main-template.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

	<ui:define name="sidebar">
		<ui:include src="/WEB-INF/templates/public-sidebar.xhtml" />
	</ui:define>
	<ui:define name="content">
		<h:form id="contentForm">
			<p:growl />
			<h:panelGrid id="contentPanelGrid" style="width: 100%">
				<h:outputText value="#{msg['createrole.label.heading']}" styleClass="outputTextTitle" />
				<h:panelGrid columns="3">
					<h:outputLabel value="#{msg['rolename.label']}" />
					<h:outputLabel value=" : " />
					<p:inputText id="roleName" value="#{createRoleBean.role.role}" />

					<h:outputLabel value="#{msg['roletype.label']}" />
					<h:outputLabel value=" : " />
					<p:selectOneMenu value="#{createRoleBean.role.roletype}" style="width:138px;">
						<f:selectItems value="#{createRoleBean.roleTypes}" />
					</p:selectOneMenu>

					<h:outputLabel value="#{msg['displayname.label']} " />
					<h:outputLabel value=" : " />
					<p:inputText value="#{createRoleBean.role.displayName}" />

					<h:outputLabel value="#{msg['description.label']} " />
					<h:outputLabel value=" : " />
					<p:inputTextarea value="#{createRoleBean.role.description}" />
				</h:panelGrid>

				<p:commandButton
					value="#{createRoleBean.assignServiceGroupsAndServicesButtonLabel} now"
					actionListener="#{createRoleBean.toggleAssignPanelDisplay}"
					update="@form" />

				<p:panel id="assignPanel" style="width: 100%"
					rendered="#{createRoleBean.assignServiceGroupsAndServices}">

					<h:panelGrid columns="2"
						columnClasses="gridCellTopLeftAligned, gridCellTopLeftAligned"
						style="width: 100%">
						<h:panelGrid style="width: 385px;">
							<h:outputText value="Available ServiceGroups"
								styleClass="outputTextSubTitle" />
							<p:dataTable id="serviceGroupsTable" style="width: 100%"
								value="#{createRoleBean.serviceGroups}"
								selection="#{createRoleBean.selectedServiceGroups}" var="row"
								selectionMode="multiple" rowKey="#{row.serviceGroupId}">
								<p:column>
									<f:facet name="header">
										<h:outputText value="Service Group" />
									</f:facet>
									<h:outputText value="#{row.servicegroupName}" />
								</p:column>

								<p:column>
									<f:facet name="header">
										<h:outputText value="Description" />
									</f:facet>
									<h:outputText value="#{row.description}" />
								</p:column>							

							</p:dataTable>
							<p:commandButton value="Assign selected Service Group(s) to Role"
								style="float:right;"
								actionListener="#{createRoleBean.assignServiceGroup}"
								update="assignedServiceGroupsTable" />
						</h:panelGrid>
						<h:panelGrid style="width: 385px;">
							<h:outputText value="Selected Service Groups"
								styleClass="outputTextSubTitle" />
							<p:dataTable id="assignedServiceGroupsTable" style="width: 100%;"
								binding="#{createRoleBean.assignedServiceGroupsTable}"
								value="#{createRoleBean.assignedServiceGroups}" var="row">
								<p:column>
									<f:facet name="header">
										<h:outputText value="Service Group" />
									</f:facet>
									<h:outputText value="#{row.servicegroupName}" />
								</p:column>

								<p:column>
									<f:facet name="header">
										<h:outputText value="Description" />
									</f:facet>
									<h:outputText value="#{row.description}" />
								</p:column>
								<p:column style="text-align: center; width: 30px;">
									<p:commandButton icon="ui-icon-close" title="Remove from list"
										actionListener="#{createRoleBean.removeServiceGroup}"
										update="@form" style="padding: 0"/>
								</p:column>

							</p:dataTable>
						</h:panelGrid>
					</h:panelGrid>
				</p:panel>
				<p:panel id="assignServicesPanel" style="width: 100%"
					rendered="#{createRoleBean.assignServiceGroupsAndServices}">
					<h:panelGrid columns="2"
						columnClasses="gridCellTopLeftAligned, gridCellTopLeftAligned"
						style="width: 100%">
						<h:panelGrid style="width: 385px;">
							<h:outputText value="Available Services"
								styleClass="outputTextSubTitle" />
							<p:dataTable id="servicesTable" style="width: 100%"
								value="#{createRoleBean.services}"
								selection="#{createRoleBean.selectedServices}" var="row"
								selectionMode="multiple" rowKey="#{row.serviceId}">
								<p:column>
									<f:facet name="header">
										<h:outputText value="Service" />
									</f:facet>
									<h:outputText value="#{row.serviceName}" />
								</p:column>
								<p:column>
									<f:facet name="header">
										<h:outputText value="Description" />
									</f:facet>
									<h:outputText value="#{row.description}" />
								</p:column>
								<p:column>
									<f:facet name="header">
										<h:outputText value="" />
									</f:facet>
								</p:column>

							</p:dataTable>
							<p:commandButton value="Assign selected Service(s) to Role"
								style="float:right;"
								actionListener="#{createRoleBean.assignService}"
								update="assignedServicesTable" />

						</h:panelGrid>

						<h:panelGrid style="width: 385px;">
							<h:outputText value="Selected Services"
								styleClass="outputTextSubTitle" />
							<p:dataTable id="assignedServicesTable" style="width: 100%;"
								binding="#{createRoleBean.assignedServicesTable}"
								value="#{createRoleBean.assignedServices}" var="row">
								<p:column>
									<f:facet name="header">
										<h:outputText value="Service" />
									</f:facet>
									<h:outputText value="#{row.serviceName}" />
								</p:column>

								<p:column>
									<f:facet name="header">
										<h:outputText value="Description" />
									</f:facet>
									<h:outputText value="#{row.description}" />
								</p:column>
								<p:column style="text-align: center; width: 30px;">
									<p:commandButton icon="ui-icon-close" title="Remove from list"
										actionListener="#{createRoleBean.removeService}"
										update="@form" style="padding: 0"/>
								</p:column>

							</p:dataTable>
						</h:panelGrid>
					</h:panelGrid>



				</p:panel>
				<p:commandButton value="Save Role"
					action="#{createRoleBean.saveRole}" update="@form" />

			</h:panelGrid>
		</h:form>
	</ui:define>
</ui:composition>